<style lang="less" scoped>
.main {
    max-width: 1440px;
    margin: 20px auto 0;

    >a {
        margin: 10px 10px 0 0;
    }
}
</style>
<template>
    <el-page-header @back="goBack">
        <template #content>
            <template v-if="token">
                <el-button type="success" plain @click="router.push('/new/' + id)">编辑</el-button>
                <el-button type="success" plain>删除</el-button>
            </template>
            <span class="text-large font-600 mr-3" style="margin-left: 20px;">[{{ blog.genre.title }}] {{ blog.title }}
            </span>
        </template>
    </el-page-header>
    <div class="main">
        <template v-if="blog.mark.length">
            <el-divider content-position="left">标签</el-divider>
            <el-tag v-for="item, index in blog.mark" :key="index" style="margin-right: 10px;">{{ item.title }}</el-tag>
        </template>
        <template v-if="blog.url">
            <el-divider content-position="left">参考链接</el-divider>
            <a v-for="item, index in blog.url" :key="index" target="_blank" :href="item">参考链接({{ index + 1 }})</a>
        </template>
        <el-divider content-position="left">博客详情</el-divider>
        <div v-html="blog.content"></div>
    </div>
</template>
<script setup>
// 引入依赖
import router from '@/router';
import axios from '@/api/index';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import 'prismjs';
import 'prismjs/themes/prism-okaidia.css';


const token = ref(localStorage.getItem('token'));
const route = useRoute();
const id = ref(route.params.id);
const blog = ref({
    genre: {
        title: ''
    },
    mark: [],
    url: []
});
const goBack = () => {
    router.push('/')
}
onMounted(() => {
    axios.get('/blog/detail/' + id.value).then((res) => {
        if (res.code == 200) {
            blog.value = res.data;
            setTimeout(() => {
                Prism.highlightAll();
            }, 100);
        }
    })
})
</script>